<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			ul li {
				list-style:none;
				margin: 10px 100px;
				background-color:red;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript">
			//事件委托机制:利用事件冒泡的原理，把本应给某元素上的事件委托给它的父级（外层）
			window.onload = function(){
				var oUl = document.getElementById("ul");
				var oLi = document.getElementsByTagName("li");
				/* for(var i = 0; i < oLi.length; i++){
					oLi[i].onclick = function(){
						console.log(this.innerText);
					}
				} */
				
				//事件委托   evt.target-->事件源属性
				oUl.onclick = function(e){
					var evt = e||event;
					
					var _target = evt.target||evt.srcElement;//事件源属性-->兼容性问题
					
					if(_target.nodeName.toUpperCase() == "LI"){
						console.log(_target.innerHTML);
					}
					// console.log();
				}
				for(var i = 0; i < 4; i++){//增加节点
					var aLi = document.createElement("li");
					aLi.innerHTML = i;
					oUl.appendChild(aLi);
				}
			}
		</script>
	</head>
	<body>
		<ul id="ul">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>
